<template>
	<div class="system-menu-container layout-pd">
		<el-card shadow="hover">
			<div class="system-menu-search mb15">
				<el-form :inline="true" :model="dataForm">
					<el-form-item><el-input size="default" v-model="dataForm.serial_number" placeholder="序列号" style="max-width: 180px"> </el-input></el-form-item>
					<el-form-item>
                        <el-select clearable filterable v-model="dataForm.manufacturer_id" placeholder="设备厂商" style="width: 180px;">
                            <el-option v-for='item in selectData.ManData' :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
					<el-form-item>
						<el-select clearable  v-model="dataForm.device_type" placeholder="摄像头类型" style="width: 180px;">
							<el-option label="近景相机" :value="1"></el-option>
							<el-option label="远景相机" :value="2"></el-option>
							<el-option label="鱼眼相机" :value="3"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select clearable  v-model="dataForm.network_status" placeholder="联网状态" style="width: 180px;">
							<el-option label="在线" :value="0"></el-option>
							<el-option label="离线" :value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select clearable  v-model="dataForm.direction" placeholder="摄像头方向" style="width: 180px;">
							<el-option label="东" :value="1"></el-option>
							<el-option label="南" :value="2"></el-option>
							<el-option label="西" :value="3"></el-option>
							<el-option label="北" :value="4"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item><el-input size="default" v-model="dataForm.mec_rcu_id" placeholder="MEC序列号" style="max-width: 180px"> </el-input></el-form-item>
					<el-form-item>
						<el-select clearable filterable v-model="dataForm.model_id" placeholder="摄像头型号" style="width: 180px;">
							<el-option  v-for="item in selectData.equipmentData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select clearable filterable v-model="dataForm.region_id" placeholder="区域名称" style="width: 180px;">
							<el-option  v-for="item in selectData.regionData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select clearable filterable v-model="dataForm.road_id" placeholder="道路名称" style="width: 180px;">
							<el-option  v-for="item in selectData.roadData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item><el-button size="default" type="primary" class="ml10" @click="onSearch">查询</el-button></el-form-item>
					<el-form-item v-if="getAuthClick('roadside-camera-create')"><el-button size="default" type="success" class="ml10" @click="onOpenAddMenu">添加</el-button></el-form-item>
				</el-form>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%;height:79vh">
				<el-table-column align="center" prop="id" label="设备编号"  />
				<!-- <el-table-column align="center" prop="number" label="设备编号"  /> -->
				<el-table-column align="center" prop="serial_number" label="序列号"  />
				<el-table-column align="center" prop="manufacturer.name" label="设备厂商" />
				<el-table-column align="center" prop="model.name" label="设备型号" />
				<el-table-column align="center" label="设备类型" >
					<template #default="scope">
						<div>
							<div v-if="scope.row.device_type==1">近景相机</div>
							<div v-if="scope.row.device_type==2">远景相机</div>
							<div v-if="scope.row.device_type==3">鱼眼相机</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center" label="摄像头方向" >
					<template #default="scope">
						<div>
							<div v-if='scope.row.direction==1'>东</div>
							<div v-if='scope.row.direction==2'>南</div>
							<div v-if='scope.row.direction==3'>西</div>
							<div v-if='scope.row.direction==4'>北</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="mec_rcu_id" label="MEC序列号" width="240" />
				<el-table-column align="center" prop="monitor_pole.lng" label="经度" />
				<el-table-column align="center" prop="monitor_pole.lat" label="纬度" />
				<el-table-column align="center" prop="region.name" label="区域名称" />
				<el-table-column align="center" prop="road.name" label="道路名称" />
				<el-table-column align="center" prop="location.name" label="路段名称" />
				<el-table-column align="center" prop="intersection.name" label="路口名称" />
				<el-table-column align="center" prop="monitor_pole.name" label="监控杆名称" />
				<el-table-column align="center" prop="ip_address" label="ip地址" />
				<el-table-column align="center" label="联网状态" >
					<template #default="scope">
						<div>
							<el-link v-if="scope.row.network_status==0" type="success">在线</el-link>
							<el-link v-else type="danger">离线</el-link>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="created_at" width="170" label="创建时间" />
				<el-table-column align="center" label="操作" fixed="right" min-width="120">
					<template #default="scope">
						<el-button v-if="showUpdataClick" size="small" text type="primary" @click="onOpenEditMenu(scope.row)">编辑</el-button>
						<el-button v-if="showDeleteClick" size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="display: flex; justify-content: flex-end;margin-right:30px">
				<el-pagination
				 style="margin-top:20px;"
				  background layout="prev, pager, next" 
				  :current-page="dataForm.page"
				  :page-size="dataForm.limit"
				  @current-change="handleCurrentChange"
				  :total="total" />
			</div>
		</el-card>
		<MenuDialog ref="menuDialogRef" @refresh="getTableList()" :tableData="tableData" :disabled="disabled" />
		<editDialog ref="editDialogRef" @refresh="getTableList()" :tableData="tableData" :disabled="disabled" />
	</div>
</template>

<script setup lang="ts" name="systemMenu">
import { defineAsyncComponent, ref, onMounted, reactive, onDeactivated, onUnmounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {CamerasApi} from "/@/api/fun/wangEditor/index"
import {useBasicApi} from "/@/api/system/menu/index"
import {userApi} from "/@/api/system/user/index"
import {useRoleApi} from "/@/api/system/role/index"
import {deptApi} from "/@/api/system/dept/index"
import {dicApi} from "/@/api/system/dic/index"
import {MansAPI} from "/@/api/fun/manufacturer/index"
import {GenreAPI} from "/@/api/fun/genre/index"
import {useUserInfo} from "/@/stores/userInfo"

	const userInfo = useUserInfo();
	const permissions=userInfo.userInfos.permissions
	// 判断是否存在组件userInfo.userInfos.permissions
	const getAuthClick=(set:string)=>{
		let sert=permissions.findIndex((item)=>
		item==set
	)
	
	return sert>=0?true:false
	}
	 const showUpdataClick=ref(getAuthClick('roadside-camera-update'))
	 const showDeleteClick=ref(getAuthClick('roadside-camera-delete'))

const setI=ref(0)
setI.value=setInterval(function(){
	getTableList()
},60*1000)
onUnmounted(()=>{
	co
	clearInterval(setI.value)
})
const ManApi = MansAPI()
const BasicApi = useBasicApi()
const roleApi = useRoleApi()
const useApi = userApi()
const depApi = deptApi()
const diApi = dicApi()
const tableData = ref({});
const disabled = ref<Boolean>(false)
const CameraApi = CamerasApi()
const GenApi = GenreAPI()
// 引入组件
const MenuDialog = defineAsyncComponent(() => import('/@/views/roadside/camera/dialog.vue'));
const editDialog = defineAsyncComponent(() => import('/@/views/roadside/camera/editDialog.vue'));

// 定义变量内容
const total =ref(1)
const menuDialogRef = ref();
const state = reactive({
	tableData: {
		data: [] ,
		loading: true,
	},
});

// dx定义
const dataForm = ref({
	serial_number:"",
	manufacturer_id:"",
	device_type:"",
	mec_rcu_id:"",
	network_status:'',
	direction:"",
	model_id:"",
	region_id:"",
	road_id:"",
	page:1,
	limit:10,
	include:"region;road;intersection;location;monitorPole;manufacturer;model",
	search:"",
})
const onSearch = (async ()=>{
	dataForm.value.search = `serial_number:${dataForm.value.serial_number};manufacturer_id:${dataForm.value.manufacturer_id};region_id:${dataForm.value.region_id};road_id:${dataForm.value.road_id};network_status:${dataForm.value.network_status};device_type:${dataForm.value.device_type};mec_rcu_id:${dataForm.value.mec_rcu_id};direction:${dataForm.value.direction};device_model:${dataForm.value.device_model}`
	getTableList()
	
})
const ruleForm = ref({
	number:"",
	serial_number:"",
	region_id:null,
	road_id:null,
	intersection_id:null,
	location_id:null,
	monitor_pole_id:null,
	manufacturer:"",
	network_status:"",
	mec_rcu_id:"",
	status:"",
	lng:"",
	lat:"",
	created_at:"",
	direction:"",
	model_id:"",
	device_type:"",
})
	const selectData = reactive({
		regionData:[],
		intersectionData:[],
		roadData:[],
		locationData:[],
		monitorPoleData:[],
		ManData:[],
		equipmentData:[],
	})
	const searchForm = ref({search:""})
	const getSelectData = (async ()=>{
		searchForm.value.search = `status:1`
		let res = await BasicApi.BasicTableApi(searchForm.value);
		if(res.isSuccess){
			selectData.regionData = res.returnData
		}
		let intersectionRes = await useApi.userTableApi(searchForm.value);
		if(intersectionRes.isSuccess){
			selectData.intersectionData = intersectionRes.returnData
		}
		let roadRes = await roleApi.RoleTableApi(searchForm.value);
		if(roadRes.isSuccess){
			selectData.roadData = roadRes.returnData
		}
		let locationRes = await depApi.getDepList(searchForm.value);
		if(locationRes.isSuccess){
			selectData.locationData = locationRes.returnData
		}
		let monitorRes = await diApi.getDicList(searchForm.value);
		if(monitorRes.isSuccess){
			selectData.monitorPoleData = locationRes.returnData
		}
		let ManRes = await ManApi.getTableList();
		if(ManRes.isSuccess){
			selectData.ManData = ManRes.returnData
		}
		let equipmentRes = await GenApi.getTableList();
		//console.log(equipmentRes,"sb")
		if(equipmentRes.isSuccess){
			selectData.equipmentData = equipmentRes.returnData
		}
	})
const handleCurrentChange = (val:number)=>{
		dataForm.value.page = val
		getTableList()
}
const getTableList = (async ()=>{
	state.tableData.loading = true
	let res = await CameraApi.getTableList(dataForm.value);
	if(res.isSuccess){
		state.tableData.data = res.returnData.data
		state.tableData.loading = false
		total.value = res.returnData.total
		dataForm.value.page = res.returnData.current_page
	}
})
const editDialogRef = ref()

// 打开新增菜单弹窗
const onOpenAddMenu = () => {
	tableData.value = ruleForm.value
	disabled.value=false
	menuDialogRef.value.openDialog();
};
// 打开编辑菜单弹窗
const onOpenEditMenu = ( row: any) => {
	tableData.value = row
	disabled.value=true
	editDialogRef.value.openDialog();
};
// 删除当前行
const onRowDel = (async (row:object)=>{
	ElMessageBox.confirm(`此操作将永久删除此数据，是否继续?`, '提示', {
	confirmButtonText: '确认',
	cancelButtonText: '取消',
	type: 'warning',
})
	.then(async ()=>{
		let res = await CameraApi.delCameras({id:row.id});
		if(res.isSuccess){
			ElMessage.success('删除成功');
			getTableList()
		}else{
			ElMessage.error('删除失败')
		}
	})
})
// 页面加载时
onMounted(() => {
	getTableList()
	getSelectData()
});
</script>

<style scoped>
	.el-input{
		height: 40px;
	}
	.el-button{
		height: 40px;
	}
</style>
